'use client';

import { useEffect, useState } from 'react';
import { windowControls, isTauri } from '@/lib/tauri';

export const TauriDebug = () => {
  const [debugInfo, setDebugInfo] = useState<any>({});

  useEffect(() => {
    const checkTauriEnvironment = () => {
      const info = {
        isTauri: isTauri(),
        hasWindow: typeof window !== 'undefined',
        hasTauriGlobal: typeof window !== 'undefined' && '__TAURI__' in window,
        hasTauriInternals: typeof window !== 'undefined' && '__TAURI_INTERNALS__' in window,
        userAgent: typeof navigator !== 'undefined' ? navigator.userAgent : 'N/A',
        windowKeys: typeof window !== 'undefined' ? Object.keys(window).filter(key => key.includes('tauri') || key.includes('TAURI')) : []
      };
      setDebugInfo(info);
      console.log('Tauri Debug Info:', info);
    };

    checkTauriEnvironment();
  }, []);

  return (
    <div className="fixed top-20 right-4 bg-black/80 text-white p-4 rounded-lg text-xs max-w-sm z-50">
      <h3 className="font-bold mb-2">Tauri Debug Info</h3>
      <div className="space-y-1">
        <div>isTauri(): {String(debugInfo.isTauri) === 'true' ? '✅' : '❌'}</div>
        <div>hasWindow: {String(debugInfo.hasWindow) === 'true' ? '✅' : '❌'}</div>
        <div>__TAURI__: {String(debugInfo.hasTauriGlobal) === 'true' ? '✅' : '❌'}</div>
        <div>__TAURI_INTERNALS__: {String(debugInfo.hasTauriInternals) === 'true' ? '✅' : '❌'}</div>
        <div>UserAgent: {String(debugInfo.userAgent || 'N/A')}</div>
        <div>Tauri Keys: {String(debugInfo.windowKeys?.join(', ') || 'None')}</div>
      </div>
      <div className="mt-3 space-y-1">
        <button 
          onClick={() => windowControls.minimize()}
          className="block w-full bg-blue-600 hover:bg-blue-700 px-2 py-1 rounded text-xs"
        >
          Test Minimize
        </button>
        <button 
          onClick={() => windowControls.toggleMaximize()}
          className="block w-full bg-green-600 hover:bg-green-700 px-2 py-1 rounded text-xs"
        >
          Test Maximize
        </button>
      </div>
    </div>
  );
};
